<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .basic {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        border: 1px solid #ccc;
        margin: 50px;
      }

      .box1 {
        color: red;
      }

      .box2 {
        background-color: blue;
      }

      .box3 {
        font-size: 24px;
        font-weight: bold;
      }

      .normal {
        border: none;
      }
    </style>
    <script src="../vue.js/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- 绑定class样式--字符串写法,适用于:样式的类名不确定,需要动态指定 -->
      <div class="basic" :class="mood" @click="changeMood">{{name}}</div>

      <!-- 绑定class样式--数组写法,适用于:要绑定的样式个数不确定、名字也不确定 -->
      <div class="basic" :class="classArr">{{name}}</div>

      <!-- 绑定class样式--对象写法,适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用 -->
      <div class="basic" :class="classObj">{{name}}</div>
    </div>

    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            name: "尚硅谷",
            mood: "normal",
            classArr: ["box1", "box2", "box3"],
            classObj: {
              box1: true,
              box2: false,
            },
          };
        },
      });
    </script>
  </body>
</html>
<!-- 
  绑定样式:
    1. class样式
      写法:class="xxx" xxx可以是字符串、对象、数组.
        字符串写法适用于:类名不确定,要动态获取.
        对象写法适用于:要绑定多个样式,个数不确定,名字也不确定.
        数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用.
-->
